<!doctype html>
<html class="no-js" lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="x-ua-compatible" content="ie=edge">
		<title>order</title>
		<meta name="description" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<link rel="icon" href="img/favicon.png" />
		<!-- Place favicon.ico in the root directory -->

		<!-- all css here -->
		<!-- bootstrap.min.css -->
		<link rel="stylesheet" href="css/shortcode/btn-new.css">
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<!-- font-awesome.min.css -->
		<link rel="stylesheet" href="css/font-awesome.min.css">
		<!-- owl.carousel.css -->
		<link rel="stylesheet" href="css/owl.carousel.css">
		<!-- owl.carousel.css -->
		<link rel="stylesheet" href="css/meanmenu.min.css">
		<!-- shortcode/shortcodes.css -->
		<link rel="stylesheet" href="css/shortcode/shortcodes.css">
		<!-- nivo-slider.css -->
		<link rel="stylesheet" href="css/nivo-slider.css">
		<!-- style.css -->
		<link rel="stylesheet" href="style.css">
		<!-- responsive.css -->
		<link rel="stylesheet" href="css/responsive.css">
		<script src="js/vendor/modernizr-2.8.3.min.js"></script>
	</head>
	<body>
		<header>
			<!-- header-top-area-start -->
			<div class="header-top-area black-bg ptb-7 hidden-xs">
				<div class="container">
					<div class="row">
						<div class="col-lg-3 col-md-3 col-sm-4">
							<div class="header-top-left">
								<span><a href="#">Call us toll free:</a>(+1)866-550-3669</span>
							</div>
						</div>
						<div class="col-lg-9 col-md-9 col-sm-8">
							<div class="header-top-right">
								<ul>
									<li class="slide-toggle"><a href="login.html"><i class="fa fa-user"></i> LoginOut</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- header-top-area-end -->
			<!-- header-bottom-area-start -->
			<div class="header-bottom-area bg-color-1 ptb-25">
				<div class="container">
					<div class="row">
						<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
							<div class="logo">
								<a href="index.html"><img src="img/logo.png" alt="" /></a>
							</div>
						</div>
						<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
							<div class="header-bottom-middle">

								<div class="search-box">
									<form>
										<input type="text" placeholder="Search...">
										<button><i class="fa fa-search"></i></button>
									</form>
								</div>
							</div>


						</div>
					</div>
				</div>
			</div>
			</div>
			</div>
			</div>
			</div>
			</div>
			<!-- header-bottom-area-end -->
		</header> <!-- header -->
		<!-- mainmenu-area-start -->
		<div class="mainmenu-area bg-color-2 hidden-xs hidden-sm">
			<div class="container">
				<div class="row">
					<div class="col-lg-3 col-md-3">
						<div class="mainmenu-left visible-lg checkout-page  visible-md">

						</div>
					</div>
				</div>
				<div class="col-lg-9 col-md-9">
					<div class="mainmenu">
						<nav>
							<ul>
								<li><a href="index.html">Home</a></li>
								<li><a href="shop.html">Shop</a></li>
								<li><a href="cart.html">Cart</a></li>
								<li><a href="order.html">Order</a></li>
								<li><a href="myaccount.html">My Account</a></li>
							</ul>
						</nav>
					</div>
				</div>
			</div>
		</div>
		</div>

		<!-- mainmenu-area-end -->
		<!-- breadcrumb start -->
		<div class="breadcrumb-area">
			<div class="container">
				<ol class="breadcrumb">
					<li><a href="index.html"><i class="fa fa-home"></i> Home</a></li>
					<li class="active">Order</li>
				</ol>
			</div>
		</div>
		<!-- breadcrumb end -->
		<!-- cart-main-area start -->
		<!-- Page Inner -->
		<div class="page-inner" style="height: -webkit-fill-available;">
			<!-- 
			<div class="alert alert-default" role="alert">
			    Simple, clean and engaging charts for designers and developers.
			</div> -->
			<div id="main-wrapper">
				<div class="row">
					<div class="col-md-12">
						<div class="panel panel-white">
							<div class="panel-heading">
							</div>

								<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" aria-hidden="true">
									<div class="modal-dialog">
										<div class="modal-content">
											<div class="modal-header">
												<button type="button" class="close btn-cancel" data-dismiss="modal" aria-label="Close">
													<span aria-hidden="true">&times;</span>
												</button>
												<h3 class="modal-title" id="addModalLabel">是否签收</h3>
											</div>
											<div class="modal-body">
												<form action="" role="form" id="add-row-form">
													<div class="form-group">
													</div>
												</form>
											</div>
											<div class="modal-footer">
												<button type="button" class="btn btn-default btn-cancel" data-dismiss="modal">取消</button>
												<button type="用户名" id="add-row" class="btn btn-success" onclick="modification()">确认</button>
											</div>
										</div>
									</div>
								</div>

								<div class="modal fade" id="returnModal" tabindex="-1" role="dialog" aria-labelledby="returnModalLabel"
								 aria-hidden="true">
									<div class="modal-dialog">
										<div class="modal-content">
											<div class="modal-header">
												<button type="button" class="close btn-cancel" data-dismiss="modal" aria-label="Close">
													<span aria-hidden="true">&times;</span>
												</button>
												<h3 class="modal-title" id="returnModalLabel">退货理由</h3>
											</div>
											<div class="modal-body">
												<select>
													<option value="reason1">产品有问题</option>
													<option value="reason2">产品有损坏</option>
													<option value="reason3">我不想要了</option>
												</select>
											</div>
											<div class="modal-footer">
												<button type="button" class="btn btn-default btn-cancel" data-dismiss="modal">取消</button>
												<button type="submit" id="add-row" class="btn btn-success" onclick="modification()">确认</button>
											</div>
										</div>
									</div>
								</div>


								<div class="modal fade" id="canlModal" tabindex="-1" role="dialog" aria-labelledby="canlModalLabel" aria-hidden="true">


									<div class="modal-dialog">
										<div class="modal-content">
											<div class="modal-header">
												<button type="button" class="close btn-cancel" data-dismiss="modal" aria-label="Close">
													<span aria-hidden="true">&times;</span>
												</button>
												<h3 class="modal-title" id="canlModalLabel">取消订单</h3>
											</div>
											<div class="modal-body">
												<form action="" role="form" id="add-row-form">
													<div class="form-group">
														<label for="cate">取消理由：</label>
														<select>
															<option value="type1">填错地址了</option>
															<option value="type2">买错型号了</option>
															<option value="type3">我不想要了</option>
														</select>

													</div>
												</form>
											</div>
											<div class="modal-footer">
												<button type="button" class="btn btn-default btn-cancel" data-dismiss="modal">取消</button>
												<button type="submit" id="add-row" class="btn btn-success" onclick="modification()">确认</button>
											</div>
										</div>
									</div>
								</div>


								<!-- Nav tabs -->
								<ul class="nav nav-tabs" role="tablist">
									<li role="presentation" class="active"><a href="#tab9" role="tab" data-toggle="tab">待支付</a></li>
									<li role="presentation"><a href="#tab10" role="tab" data-toggle="tab">待发货</a></li>
									<li role="presentation"><a href="#tab11" role="tab" data-toggle="tab">已发货</a></li>
									<li role="presentation"><a href="#tab12" role="tab" data-toggle="tab">已完成</a></li>
									<li role="presentation"><a href="#tab13" role="tab" data-toggle="tab">已取消</a></li>
									<li role="presentation"><a href="#tab13" role="tab" data-toggle="tab">已退货</a></li>
								</ul>
								<!-- Tab panes -->
								<div class="tab-content">
									<div role="tabpanel" class="tab-pane active fade in" id="tab9">
										<div class="table-responsive">
											<table id="example" class="display table" style="width: 100%; cellspacing: 0;">
												<thead>
													<tr>
														<th></th>
														<th>商品标题</th>
														<th>价格</th>
														<th>数量</th>
														<th>sku</th>
														<th>订单编号</th>
														<th>订单创建时间</th>
														<th>管理</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td></td>
														<td>MP3</td>
														<td>$100</td>
														<td>2</td>
														<td>16Gb 白色</td>
														<td>10031</td>
														<td>2020/8/1</td>
														<td>
															<button type='button' class="btn-mini" data-toggle="modal" data-target="#canlModal"><i class='btn-remove'></i>取消订单</button>
										</div>
										</td>
										</tr>
										</tbody>
										</table>
									</div>
								</div>
								<div role="tabpanel" class="tab-pane fade" id="tab10">
									<div class="table-responsive">
										<table id="example1" class="display table" style="width: 100%; cellspacing: 0;">
											<thead>
												<tr>
													<th></th>
													<th>商品标题</th>
													<th>价格</th>
													<th>数量</th>
													<th>sku</th>
													<th>订单编号</th>
													<th>订单创建时间</th>
													<th>管理</th>
												</tr>
											</thead>
											<tbody>
												<tr>
													<td></td>
													<td>MP3</td>
													<td>$100</td>
													<td>2</td>
													<td>16Gb 白色</td>
													<td>10031</td>
													<td>2020/8/1</td>
													<td>
														<button type='button' class="btn-mini" data-toggle="modal" data-target="#canlModal"><i class='btn-remove'></i>取消订单</button>
													</td>
												</tr>
											</tbody>
										</table>
									</div>
								</div>
								<div role="tabpanel" class="tab-pane fade" id="tab11">
									<div class="table-responsive">
										<table id="example2" class="display table" style="width: 100%; cellspacing: 0;">
											<thead>
												<tr>
													<th></th>
													<th>商品标题</th>
													<th>价格</th>
													<th>数量</th>
													<th>sku</th>
													<th>订单编号</th>
													<th>订单创建时间</th>
													<th>物流跟踪号</th>
													<th>管理</th>
												</tr>
											</thead>
											<tbody>
												<tr>
													<td></td>
													<td>MP3</td>
													<td>$100</td>
													<td>2</td>
													<td>16Gb 白色</td>
													<td>10031</td>
													<td>2020/8/1</td>
													<td>NULL</td>
													<td><button type='button' class="btn-mini" data-toggle="modal" data-target="#returnModal"><i class='btn-remove'></i>退货</button>
														<button type='button' class="button button3" data-toggle="modal" data-target="#addModal">签收<i class="fa fa-usd"></i></button>
													</td>

												</tr>
											</tbody>
										</table>
									</div>
								</div>
								<div role="tabpanel" class="tab-pane fade" id="tab12">
									<div class="table-responsive">
										<table id="example3" class="display table" style="width: 100%; cellspacing: 0;">
											<thead>
												<tr>
													<th></th>
													<th>商品标题</th>
													<th>价格</th>
													<th>数量</th>
													<th>sku</th>
													<th>订单编号</th>
													<th>订单取消时间</th>
													<th>物流跟踪号</th>
												</tr>
											</thead>
											<tbody>
												<tr>
													<td></td>
													<td>MP3</td>
													<td>$100</td>
													<td>2</td>
													<td>16Gb 白色</td>
													<td>10031</td>
													<td>2020/8/1</td>
												</tr>
											</tbody>
										</table>
									</div>
								</div>
								<div role="tabpanel" class="tab-pane fade" id="tab13">
									<table id="example4" class="display table" style="width: 100%; cellspacing: 0;">

										<thead>
											<tr>
												<th></th>
												<th>商品标题</th>
												<th>价格</th>
												<th>数量</th>
												<th>sku</th>
												<th>订单编号</th>
												<th>订单退货时间</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td></td>
												<td>MP3</td>
												<td>$100</td>
												<td>2</td>
												<td>16Gb 白色</td>
												<td>10031</td>
												<td>2020/8/1</td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>

						</div>
					</div>
				</div>
			</div>
		</div>
		</div>
		</div><!-- Main Wrapper -->
		<div class="page-footer">
			<!-- social_block-start -->
			<div id="social_block">
				<ul>
					<li class="facebook"><a href="#">Facebook</a></li>
					<li class="twitter"><a href="#">twitter</a></li>
					<li class="rss"><a href="#">rss</a></li>
					<li class="youtube"><a href="#">youtube</a></li>
					<li class="google-plus"><a href="#">google plus</a></li>
					<li class="pinterest"><a href="#">pinterest</a></li>
				</ul>
			</div>
			<!-- social_block-end -->
		</div>
		</div><!-- /Page Inner -->

		<script src="assets/plugins/jquery/jquery-3.1.0.min.js"></script>
		<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
		<script src="assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js"></script>
		<script src="assets/plugins/uniform/js/jquery.uniform.standalone.js"></script>
		<script src="js/bootstrap-table.min.js"></script>
		<script src="js/bootstrap-table-zh-CN.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="assets/plugins/switchery/switchery.min.js"></script>
		<script src="assets/js/ecaps.min.js"></script>
		<script type="text/javascript">
			$(function() {
				var bid = localStorage.getItem('user_id');
				var options = {
					method: 'post',
					url: "http://localhost:88/Order/getBrandlist?brandid=" + bid + "&status=0",
					ajaxOptions: {
						headers: {
							"GMC-ACCESS-TOKEN": localStorage.getItem('token')
						}
					},
					cache: false,
					contentType: 'application/x-www-form-urlencoded',
					striped: true,
					dataType: "json",
					pagination: true,
					showPaginationSwitch: false,
					pageSize: 4,
					pageNumber: 1,
					sortable: true,
					sortOrder: "asc",
					pageList: [2, 5, 10],
					search: true,
					sidePagination: 'client',
					silent: true,
					toolbarAlign: 'right',
					columns: [{
						field: null,
						checkbox: true,
					}, {
						field: 'title',
						align: 'center',
						formatter: function(value, row, index) {
							var html = [
								'<a href="bvo-goodsdetail.html?pid=' + row.pid + '" class="text-info">' + value + '</a>'
							];
							return html.join('');
						}
					}, {
						field: 'price',
						align: 'center',
					}, {
						field: 'num',
						align: 'center',
					}, {
						field: 'sku',
						align: 'center',
					}, {
						field: 'oid',
						align: 'center',
					}, {
						field: 'date',
						align: 'center',
					}, {
						field: 'pid',
						align: 'center',
						visible: false,
					}, ]
				};
				var options1 = {
					method: 'post',
					url: "http://localhost:88/Order/getBrandlist?brandid=" + bid + "&status=1",
					ajaxOptions: {
						headers: {
							"GMC-ACCESS-TOKEN": localStorage.getItem('token')
						}
					},
					cache: false,
					contentType: 'application/x-www-form-urlencoded',
					striped: true,
					dataType: "json",
					pagination: true,
					showPaginationSwitch: false,
					pageSize: 4,
					pageNumber: 1,
					sortable: true,
					sortOrder: "asc",
					pageList: [2, 5, 10],
					search: true,
					sidePagination: 'client',
					silent: true,
					toolbarAlign: 'right',
					columns: [{
						field: null,
						checkbox: true,
					}, {
						field: 'title',
						align: 'center',
						formatter: function(value, row, index) {
							var html = [
								'<a href="bvo-goodsdetail.html?pid=' + row.pid + '" class="text-info">' + value + '</a>'
							];
							return html.join('');
						}
					}, {
						field: 'price',
						align: 'center',
					}, {
						field: 'num',
						align: 'center',
					}, {
						field: 'sku',
						align: 'center',
					}, {
						field: 'oid',
						align: 'center',
					}, {
						field: 'date',
						align: 'center',
					}, {
						field: 'tradenum',
						align: 'center',
						valign: 'center',
						events: window.operateEvents,
						formatter: function(value, row, index) {
							//console.log(row["pid"]);
							//console.log(row["oid"]);
							var html = [
								"<button type='button' class='btn btn-info btn-xs' onclick='pay(" + row["pid"] + "," + row["oid"] +
								")'><i class='fa fa-pencil'></i>发货</button>",
							];
							return html.join('');
						}
					}, {
						field: 'pid',
						align: 'center',
						visible: false,
					}, ]
				};
				var options2 = {
					method: 'post',
					url: "http://localhost:88/Order/getBrandlist?brandid=" + bid + "&status=2",
					ajaxOptions: {
						headers: {
							"GMC-ACCESS-TOKEN": localStorage.getItem('token')
						}
					},
					cache: false,
					contentType: 'application/x-www-form-urlencoded',
					striped: true,
					dataType: "json",
					pagination: true,
					showPaginationSwitch: false,
					pageSize: 4,
					pageNumber: 1,
					sortable: true,
					sortOrder: "asc",
					pageList: [2, 5, 10],
					search: true,
					sidePagination: 'client',
					silent: true,
					toolbarAlign: 'right',
					columns: [{
						field: null,
						checkbox: true,
					}, {
						field: 'title',
						align: 'center',
						formatter: function(value, row, index) {
							var html = [
								'<a href="bvo-goodsdetail.html?pid=' + row.pid + '" class="text-info">' + value + '</a>'
							];
							return html.join('');
						}
					}, {
						field: 'price',
						align: 'center',
					}, {
						field: 'num',
						align: 'center',
					}, {
						field: 'sku',
						align: 'center',
					}, {
						field: 'oid',
						align: 'center',
					}, {
						field: 'date',
						align: 'center',
					}, {
						field: 'tradenum',
						align: 'center',
						formatter: function(value, row, index) {
							var html = [
								'<a href="brand-ordertracking.html" class="text-primary">' + value + '</a>'
							];
							return html.join('');
						}
					}, {
						field: 'op',
						align: 'center',
						valign: 'center',
						events: window.operateEvents,
						formatter: function(value, row, index) {
							console.log(row["pid"]);
							console.log(row["oid"]);
							var html = [
								"<button type='button' class='btn btn-warning btn-xs' onclick='cancel(" + row["pid"] + "," + row["oid"] +
								")'><i class='fa fa-pencil'></i>取消</button>",
							];
							return html.join('');
						}
					}, {
						field: 'pid',
						align: 'center',
						visible: false,
					}, ]
				};
				var options3 = {
					method: 'post',
					url: "http://localhost:88/Order/getBrandlist?brandid=" + bid + "&status=3",
					ajaxOptions: {
						headers: {
							"GMC-ACCESS-TOKEN": localStorage.getItem('token')
						}
					},
					cache: false,
					contentType: 'application/x-www-form-urlencoded',
					striped: true,
					dataType: "json",
					pagination: true,
					showPaginationSwitch: false,
					pageSize: 4,
					pageNumber: 1,
					sortable: true,
					sortOrder: "asc",
					pageList: [2, 5, 10],
					search: true,
					sidePagination: 'client',
					silent: true,
					toolbarAlign: 'right',
					columns: [{
						field: null,
						checkbox: true,
					}, {
						field: 'title',
						align: 'center',
						formatter: function(value, row, index) {
							var html = [
								'<a href="bvo-goodsdetail.html?pid=' + row.pid + '" class="text-info">' + value + '</a>'
							];
							return html.join('');
						}
					}, {
						field: 'price',
						align: 'center',
					}, {
						field: 'num',
						align: 'center',
					}, {
						field: 'sku',
						align: 'center',
					}, {
						field: 'oid',
						align: 'center',
					}, {
						field: 'date',
						align: 'center',
					}, {
						field: 'tradenum',
						align: 'center',
						formatter: function(value, row, index) {
							var html = [
								'<a href="brand-ordertracking.html" class="text-primary">' + value + '</a>'
							];
							return html.join('');
						}
					}, {
						field: 'pid',
						align: 'center',
						visible: false,
					}, ]
				};
				var options4 = {
					method: 'post',
					url: "http://localhost:88/Order/getBrandlist?brandid=" + bid + "&status=4",
					ajaxOptions: {
						headers: {
							"GMC-ACCESS-TOKEN": localStorage.getItem('token')
						}
					},
					cache: false,
					contentType: 'application/x-www-form-urlencoded',
					striped: true,
					dataType: "json",
					pagination: true,
					showPaginationSwitch: false,
					pageSize: 4,
					pageNumber: 1,
					sortable: true,
					sortOrder: "asc",
					pageList: [2, 5, 10],
					search: true,
					sidePagination: 'client',
					silent: true,
					toolbarAlign: 'right',
					columns: [{
						field: null,
						checkbox: true,
					}, {
						field: 'title',
						align: 'center',
						formatter: function(value, row, index) {
							var html = [
								'<a href="bvo-goodsdetail.html?pid=' + row.pid + '" class="text-info">' + value + '</a>'
							];
							return html.join('');
						}
					}, {
						field: 'price',
						align: 'center',
					}, {
						field: 'num',
						align: 'center',
					}, {
						field: 'sku',
						align: 'center',
					}, {
						field: 'oid',
						align: 'center',
					}, {
						field: 'date',
						align: 'center',
					}, {
						field: 'pid',
						align: 'center',
						visible: false,
					}, ]
				};
				$('#example').bootstrapTable(options);
				$('#example1').bootstrapTable(options1);
				$('#example2').bootstrapTable(options2);
				$('#example3').bootstrapTable(options3);
				$('#example4').bootstrapTable(options4);
			});

			function refresh() {
				$('#example').bootstrapTable('refresh');
				$('#example1').bootstrapTable('refresh');
				$('#example2').bootstrapTable('refresh');
				$('#example3').bootstrapTable('refresh');
				$('#example4').bootstrapTable('refresh');
				console.log('refresh');
			}

			function pay(pid, oid) {
				//console.log(pid);
				//console.log(oid);
				$.ajax({
					type: "get",
					url: "http://localhost:88/Order/sendOrder?oid=" + oid + "&pid=" + pid,
					headers: {
						"GMC-ACCESS-TOKEN": localStorage.getItem('token'),
					},
					async: false,
					success: function(datas) { //成功后执行的函数
						console.log(datas);
						$('#example1').bootstrapTable('refresh');
						$('#example2').bootstrapTable('refresh');
					},
					error: function(e) {
						console.log(e);
					}
				});
			}

			function cancel(pid, oid) {
				//console.log(pid);
				//console.log(oid);
				$.ajax({
					type: "get",
					url: "http://localhost:88/Order/updateOrderstatus?Ordernum=" + oid + "&pid=" + pid + "&status=4",
					headers: {
						"GMC-ACCESS-TOKEN": localStorage.getItem('token'),
					},
					async: false,
					success: function(datas) { //成功后执行的函数
						console.log(datas);
						$('#example2').bootstrapTable('refresh');
						$('#example4').bootstrapTable('refresh');
					},
					error: function(e) {
						console.log(e);
					}
				});
			}

			var map1 = {};

			//				})
		</script>
		<!-- main-area end -->

		<!-- js here -->
		<script src="js/jquery-3.3.1.min.js"></script>
		<!-- bootstrap.min.js -->
		<script src="js/bootstrap.min.js"></script>
		<!-- nivo.slider.js -->
		<script src="js/jquery.nivo.slider.pack.js"></script>
		<!-- jquery-ui.min.js -->
		<script src="js/jquery-ui.min.js"></script>
		<!-- jquery.magnific-popup.min.js -->
		<script src="js/jquery.magnific-popup.min.js"></script>
		<!-- jquery.meanmenu.min.js -->
		<script src="js/jquery.meanmenu.js"></script>
		<!-- jquery.scrollup.min.js-->
		<script src="js/jquery.scrollup.min.js"></script>
		<!-- owl.carousel.min.js -->
		<script src="js/owl.carousel.min.js"></script>
		<!-- plugins.js -->
		<script src="js/plugins.js"></script>
		<!-- main.js -->
		<script src="js/main.js"></script>
	</body>
</html>
